import React from "react";

import {Modal, Transfer, message, Card, Checkbox, Radio, Button, Input} from 'antd';
import { fetchTableListByProjectHasDbApi } from "../api/databaseManager";
import { getProjectApi, modifyProjectApi } from "../api/projectManager";

class TableGenConfig extends React.Component {

    completeCallBack;

    state = {
        visible: false,
        mockData: [],
        targetKeys: [],
        projectInfo: {},
        tables: []
    }

    componentDidMount() {
        this.props.onRef(this)

    }

    fetchTableListByProjectHasDb = () => {
        fetchTableListByProjectHasDbApi(this.props.projectId).then((res)=>{
            const tables = res.data.data;
            if( ! tables) {
                return;
            }
            this.setState({...this.state, tables: res.data.data});

            const targetKeys = [];
            const mockData = [];
            for (let i = 0; i < this.state.tables.length; i++) {
                const data = {
                    key: this.state.tables[i].id.toString(),
                    title: this.state.tables[i].name,
                    description: this.state.tables[i].comment,
                };
                mockData.push(data);


            }

            getProjectApi(this.props.projectId).then((res)=>{

                var targetKeys = [];
                var projectInfo = res.data.data;
                var ignoreTables = projectInfo.ignoreTables;
                if(ignoreTables) {
                    var ignoreTablesArr = JSON.parse(ignoreTables);
                    targetKeys = ignoreTablesArr;
                }

                console.info('targetKeys='+targetKeys);

                this.setState({...this.state, mockData, targetKeys: targetKeys, projectInfo: projectInfo});
            });

        });
    }


    showModal = (callBack) => {
        this.completeCallBack = callBack;
        this.setState({...this.state, visible: true});
        this.fetchTableListByProjectHasDb();
    }

    handleCancel = () => {
        this.setState({...this.state, visible: false});
    }

    handleChange = (targetKeys, direction, moveKeys) => {
        console.log(targetKeys, direction, moveKeys);
        var ignoreTables = targetKeys.filter(item => Object.prototype.toString.call(item) != '[object Object]' )
        ignoreTables = JSON.stringify(ignoreTables);
        console.log(ignoreTables);

        modifyProjectApi({id: this.props.projectId, ignoreTables: ignoreTables});
        this.setState({...this.state, targetKeys });
    };

    renderItem = item => {
        const customLabel = (
            <span className="custom-item">
        {item.title} - {item.description}
      </span>
        );

        return {
            label: customLabel, // for displayed item
            value: item.title, // for title and filter matching
        };
    };

    render() {
        let {visible} = this.state;

        return <Modal
            style={{top: 10}}
            width={800}
            visible={visible}
            keyboard={false}
            maskClosable={false}
            title="数据库表配置"
            onOk={this.handleOk}
            onCancel={this.handleCancel}
            footer={[
                <Button key="back" onClick={this.handleCancel}>关闭</Button>
            ]}
        >

            <Transfer
                dataSource={this.state.mockData}
                listStyle={{
                    width: 300,
                    height: 400,
                }}
                targetKeys={this.state.targetKeys}
                onChange={this.handleChange}
                render={this.renderItem}
            />

        </Modal>
    }
}

export default TableGenConfig